import React, { useState, useEffect } from "react";
import {Input} from "antd";

const InputItem = (props) => {
  const [isEdit, setIsEdit] = useState(false);
  const { item, index } = props;
  const [inputValue, setInputValue] = useState(item.desc);
  
  // useEffect(() => {
  //   props.handleOnchangeValue(index, inputValue);
  // }, [inputValue]);

  //输入框值发生变化触发
  const handleOnchangeValue = (e) => {
    let value = e.target.value;
    setInputValue(value);
  };
  //失去焦点
  const handleOnBlur = () => {
    setIsEdit(false);
  };
  //双击元素
  const handleClickDbItem = () => {
    setIsEdit(true);
    
  };
  //回车确认更改信息
  const handlePressEnter=()=>{
    props.handleOnchangeValue(index, inputValue);
    setIsEdit(false);
  }
  if (isEdit) {
    return (
      <Input
        value={inputValue}
        onChange={handleOnchangeValue}
        onBlur={handleOnBlur}
        onPressEnter={handlePressEnter}
      />
    );
  }
  return <div onDoubleClick={handleClickDbItem}>{item.desc}</div>;
};

export default InputItem;
